<template>
    <button @click="fSwitch">改变</button>
    <div :class="cssBg">11111</div>
    <div v-for="(item, index) in listData" :key="index">
        {{ item }}
    </div>
    <!-- <button @click="add()">新增</button> -->
    <button @click="add(addName)">新增(内联)</button>
    <div>{{ testName }}</div>
    <textarea>{{ testName }}</textarea><!-- 不会更新响应 -->
    <textarea v-model="testName"></textarea><!-- 会更新响应 -->
    <input v-model.lazy="testName" /><!-- 延迟，失去焦点时才更新 -->
</template>
<script setup lang="ts">
import { ycIsEmpty } from '@/yc/units/YcEmpty'
import { defineComponent, reactive, ref, watchEffect, watch, toRef } from 'vue';
let testName = ref("123");
let cssBg = ref("_red");
let flag = true
let listData = reactive(["1", "2", "3"])
let fSwitch = () => {
    flag = !flag
    if (flag) {
        cssBg.value = "_red"
    } else {
        cssBg.value = "_blue"
    }
}
const addName = "add"
const add = (msg: string) => {
    if (ycIsEmpty(msg)) {
        listData.push("-")
    } else {
        listData.push(msg)
    }
}
</script>

<style scoped>
._red {
    background: red;
    background-color: red;
}

._blue {
    background: blue;
    background-color: blue;
}
</style>